<template>
  <view>
    <swiper class="swiper" circular interval="3000" @change="onChange">
      <swiper-item
        class="swiper_item"
        v-for="(item, index) in swiperData"
        :key="item.pics_id"
        @tap="previewImage(index)"
      >
        <image class="swiper_image" mode="widthFix" :src="item.pics_big" />
      </swiper-item>
    </swiper>
    <view class="swiper_indicator">{{ currentPage }}/{{ totalPage }}</view>
    <view class="goods_description">
      <view class="goods_top">
        <view class="price">{{ goodsDetail.goods_price }}</view>
        <view class="iconfont iconfenxiang">
          <button open-type="share" class="system_module"></button>
        </view>
        <view class="iconfont iconshoucang"></view>
      </view>
      <view class="goods_name">
        {{ goodsDetail.goods_name }}
      </view>
    </view>
    <view class="border"></view>
    <view class="introduce">
      <view class="title">图文详情</view>
      <rich-text :nodes="goodsDetail.goods_introduce"></rich-text>
    </view>
    <navigator open-type="navigateBack" class="back">
      <view class="iconfont iconfanhui"></view>
    </navigator>
    <view class="utils">
      <view class="service">
        <view class="iconfont iconmine_icon_customer"></view>
        <text class="service_text">联系客服</text>
        <button class="system_module" open-type="contact"></button>
      </view>
      <navigator url="/pages/cart/main" open-type="switchTab" hover-class="none">
      <view class="shopping_car">
        <view class="iconfont icongouwuche"></view>
        <text class="shopping_car_text">购物车</text>
        <view class="count" v-if="shoppingCarListLength>0">{{shoppingCarListLength}}</view>
      </view>
      </navigator>
      <view class="add_car" @tap="addCar">加入购物车</view>
      <view class="to_buy">立即购买</view>
    </view>
  </view>
</template>

<script>
import { getGoodsDetail } from "@/api/goodsDetail";
export default {
  data() {
    return {
      goodsId: "",
      swiperData: [],
      goodsDetail: {
        goods_price: "",
        goods_name: "",
        goods_introduce: "",
        goods_small_logo: "",
      },
      totalPage: 0,
      currentPage: 1,
      shoppingCarListLength:0
    };
  },
  watch: {
    swiperData(swiperData) {
      this.totalPage = swiperData.length;
    },
  },
  onLoad(query) {
    this.goodsId = query.goods_id || 2466;
    this.getGoodsDetail();
    const shoppingCarList = uni.getStorageSync("shoppingCarList") || [];
    this.shoppingCarListLength = shoppingCarList.length
  },
  methods: {
    async getGoodsDetail() {
      const res = await getGoodsDetail({ goods_id: this.goodsId });
      const {
        pics,
        goods_price,
        goods_name,
        goods_introduce,
        goods_small_logo,
      } = res.data.message;
      const { system } = uni.getSystemInfoSync();
      const isIOS = system.toLowerCase().includes("ios");
      this.goodsDetail.goods_introduce = goods_introduce.replace(
        /<img/g,
        '<img class="introduce_image"'
      );
      if (isIOS) {
        this.goodsDetail.goods_introduce = this.goodsDetail.goods_introduce.replace(
          /\.webp/g,
          ".jpg"
        );
      }
      this.swiperData = pics;
      this.goodsDetail.goods_price = goods_price;
      this.goodsDetail.goods_name = goods_name;
      this.goodsDetail.goods_small_logo = goods_small_logo;
    },
    onChange(e) {
      this.currentPage = e.detail.current + 1;
    },
    previewImage(index) {
      const urls = this.swiperData.map((item) => item.pics_big);
      uni.previewImage({
        current: urls[index],
        urls,
      });
    },
    addCar() {
      uni.showToast({
        title:'已加入购物车',
        mask:true,
        duration:1000
      })
      const shoppingCarList = uni.getStorageSync("shoppingCarList") || [];
      const index = shoppingCarList.findIndex(
        (item) => item.goods_id === this.goodsId
      );
      if (index === -1) {
        let goods_count = 0;
        goods_count++;
        const shoppingCarItem = {
          goods_id: this.goodsId,
          goods_price: this.goodsDetail.goods_price,
          goods_name: this.goodsDetail.goods_name,
          goods_small_logo: this.goodsDetail.goods_small_logo,
          goods_count: goods_count,
          goods_selected: true,
        };
        shoppingCarList.push(shoppingCarItem);
        this.shoppingCarListLength = shoppingCarList.length
        
      } else {
        shoppingCarList[index].goods_count++;
        shoppingCarList[index].goods_selected = true;
      }
      uni.setStorageSync("shoppingCarList", shoppingCarList);
    },
  },
};
</script>

<style lang="less">
.swiper {
  position: relative;
  width: 750rpx;
  height: 750rpx;
  .swiper_image {
    width: 100%;
    height: 100%;
  }
}
.swiper_indicator {
  position: absolute;
  z-index: 1;
  right: 30rpx;
  top: 680rpx;
  background-color: rgba(36, 36, 36, 0.3);
  height: 40rpx;
  padding: 0 20rpx;
  border-radius: 20rpx;
  color: #eee;
}

.goods_description {
  width: 750rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  .goods_top {
    display: flex;
    padding: 20rpx 0;
    .price {
      flex: 1;
      font-size: 38rpx;
    }
    .iconfenxiang,
    .iconshoucang {
      font-size: 38rpx;
      color: #707070;
    }
    .iconfenxiang {
      position: relative;
      font-size: 46rpx;
      margin-right: 20rpx;
    }
  }
  .goods_name {
    width: 100%;
    font-size: 30rpx;
    color: #434343;
    padding-bottom: 48rpx;
  }
}
.introduce {
  padding-bottom: 94rpx;
  .title {
    text-align: center;
    font-size: 28rpx;
    color: #434343;
    margin: 10rpx 0;
  }
  .introduce_image {
    vertical-align: top;
  }
}
.back {
  width: 100rpx;
  height: 56rpx;
  background-color: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50rpx;
  left: 50rpx;
  border-radius: 28rpx;
  .iconfanhui {
    font-size: 42rpx;
  }
}
.utils {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 94rpx;
  background-color: #fff;
  align-items: center;
  justify-content: space-evenly;
  .service,
  .shopping_car {
    position: relative;
    width: 100rpx;
    height: 80rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    .iconmine_icon_customer,
    .icongouwuche {
      color: #434343;
      font-size: 34rpx;
    }
    .icongouwuche {
      font-size: 38rpx;
    }
    .service_text,
    .shopping_car_text {
      color: #434343;
      font-size: 24rpx;
    }
    .count{
      position: absolute;
      top: 0rpx;
      left: 50rpx;
      height: 30rpx;
      padding: 0 15rpx;
      border-radius: 15rpx;
      font-size: 20rpx;
      background-color: var(--main_color);
      color: #fff;
    }
  }
  .add_car,
  .to_buy {
    width: 196rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26rpx;
    background-color: #fcaa23;
    border-radius: 30rpx;
    color: #fff;
  }

  .to_buy {
    background-color: var(--main_color);
  }
}
</style>